<!DOCTYPE html>
<html>
  <head>
    <title>Dynamic State Transitions</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenLite.min.js"></script>
    <script src="C:\Users\10456\Desktop\ma\vue\vue.js"></script>
    <style>
      svg {
        display: block;
      }
      polygon {
        fill: #41b883;
      }
      circle {
        fill: transparent;
        stroke: #35495e;
      }
      input[type="range"] {
        display: block;
        width: 100%;
        margin-bottom: 15px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <svg width="200" height="200">    <!-- svg标签表示矢量图画板 -->>
        <polygon :points="points"></polygon>
        <circle cx="100" cy="100" r="90"></circle>
      </svg>
      <label>Sides: {{ sides }}</label>
      <input type="range" min="3" max="500" v-model.number="sides" />

      <label>Minimum Radius: {{ minRadius }}%</label>
      <input type="range" min="0" max="90" v-model.number="minRadius" />

      <label>Update Interval: {{ updateInterval }} milliseconds</label>
      <input type="range" min="10" max="2000" v-model.number="updateInterval" />
    </div>

    <script>
      new Vue({
        el: "#app",
//初始数据
        data: function() {
          var defaultSides = 10;
          var stats = Array.apply(null, { length: defaultSides }).map(
            function() {
              return 100;
            }
          );
          return {
            stats: stats,                   //点数组
            points: generatePoints(stats),  //坐标数组
            sides: defaultSides,    //默认边数10
            minRadius: 50,          //默认弧度50
            interval: null,         //
            updateInterval: 500     //默认更新速度500ms
          };
        },
//事件监听
        watch: {
          //边数改变时，向点数组末尾添加新项
          sides: function(newSides, oldSides) {
            var sidesDifference = newSides - oldSides;
            if (sidesDifference > 0) {
              for (var i = 1; i <= sidesDifference; i++) {
                this.stats.push(this.newRandomValue()); //向数组末尾添加新项
              }
            } else {
              var absoluteSidesDifference = Math.abs(sidesDifference);
              for (var i = 1; i <= absoluteSidesDifference; i++) {
                this.stats.shift(); //移除数组的第一项
              }
            }
          },
    /*点数组改变时，调用generatePoints对坐标进行调整，然后使用TweenLite库刻画图形*/
          stats: function(newStats) {
            TweenLite.to(this.$data, this.updateInterval / 1000, {
              points: generatePoints(newStats)
            });
          },
          //更新时间改变时，调用resetInterval方法
          updateInterval: function() {
            this.resetInterval();
          }
        },
        //挂载时设置定时器
        mounted: function() {
          this.resetInterval();
        },
/*方法*/
        methods: {
          //把当前弧度随机值赋给stats
          randomizeStats: function() {
            var vm = this;
            this.stats = this.stats.map(function() {
              return vm.newRandomValue();
            });
          },
          //返回一个100到最小弧度之间的随机值
          newRandomValue: function() {
            return Math.ceil(
              this.minRadius + Math.random() * (100 - this.minRadius)
            );
          },
          //定时改变点数组的设置
          resetInterval: function() {
            var vm = this;
            clearInterval(this.interval);   //取消定时操作
            this.randomizeStats();
            //interval是一个方法，间隔地随机化点数组
            this.interval = setInterval(function() {
              vm.randomizeStats();
            }, this.updateInterval);
          }
        }
      });
      //函数，value是边的长度，index是该边是第几条边，total是边数量
      //该函数把点变成坐标
      function valueToPoint(value, index, total) {
        var x = 0;
        var y = -value * 0.9;
        var angle = ((Math.PI * 2) / total) * index;    //该边的水平任意角大小
        var cos = Math.cos(angle);
        var sin = Math.sin(angle);
        var tx = x * cos - y * sin + 100;//tx是横坐标
        var ty = x * sin + y * cos + 100;//ty是纵坐标
        return { x: tx, y: ty };        //返回一个对象，属性值分别是tx和ty
      }
      //函数，map可以返回经过其参数函数处理的一个新数组，join把数组中的内容转换成字符串，并用引号分隔
      //该函数返回重新设置后的坐标值
      function generatePoints(stats) {
        var total = stats.length;
        return stats
          .map(function(stat, index) {
            var point = valueToPoint(stat, index, total);
            return point.x + "," + point.y;
          })
          .join(" ");
      }
    </script>
  </body>
</html>
